let nav = document.querySelector('.nav')
let toggle = document.querySelector('.toggle')

toggle.addEventListener('click', () => {
    toggle.classList.toggle('active')
    nav.classList.toggle('active')
})

// 1. 获取元素
let searchIcon = document.querySelector(".img1")
let clearIcon = document.querySelector(".clear")
let searchBar = document.querySelector(".searchBar")
let inp = document.querySelector(".inp")

// 2. 点击，切换类 => 改宽实现展开
searchIcon.addEventListener("click", () => {
    searchBar.classList.toggle("changeWidth")
})
// 3. 点击清空
clearIcon.addEventListener("click", () => {
    inp.value = ""
})

window.addEventListener('CartMessage', (event) => {
    // 确保消息来自iframe的源
    if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
        const message = event.data;

        if (message.type === 'CartButtonClick') {
            // 处理按钮点击事件
            console.log(message.data);
            window.location.href = 'shopcar.jsp'
        }
    }
});
let cartAnimation = document.getElementById('cart-animation');
let iframeMobile = document.getElementById('mobile');
dropAndRiseAnimation('商品:' + name + '已经加入购物车\n期待您的购买', this);

function addToCart(name) {
    let cart = [];
    if (document.cookie.includes('cart=')) {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith('cart=')) {
                const cartJSON = decodeURIComponent(cookie.substring(5));
                cart = JSON.parse(cartJSON);
                break;
            }
        }
    }
    cart.push(name);
    const cartJSON1 = JSON.stringify(cart);
    document.cookie = 'cart=' + encodeURIComponent(cartJSON1) + '; expires=Thu, 01 Jan 2024 00:00:00 UTC; path=/;';

    // 触发自定义事件，通知其他组件购物车有变化
    const event = new CustomEvent('CartMessage', {
        detail: {
            type: 'CartButtonClick',
            data: {
                name: name,
                cart: cart
            }
        }
    });
    window.dispatchEvent(event);
}

function dropAndRiseAnimation(message, button) {
    addToCart(message);
    const animationBox = document.getElementById("animationBox");
    const animationText = document.getElementById("animationText");

    // 计算按钮位置
    const buttonRect = button.getBoundingClientRect();
    const buttonTop = buttonRect.top + window.scrollY;
    const buttonLeft = buttonRect.left + window.scrollX;

    // 显示动画元素
    animationBox.style.display = "block";

    // 设置动态生成的文字
    animationText.textContent = "尊敬的客户,你选择的" + message + "已经加入购物车了,期待您的购买";
    //
    // // 设置动画元素位置
    animationBox.style.top = (buttonTop - 100) + "px";
    animationBox.style.left = (buttonLeft - 100) + "px";

    // 添加动画效果
    animationBox.style.animation = "dropAndRise 10s";

    // 在动画结束后隐藏动画元素，并重置动画
    setTimeout(function () {
        animationBox.style.display = "none";
        animationBox.style.animation = "";
    }, 10000);
}


function toggleMode() {
    const bodyClassList = document.body.classList;
    if (bodyClassList.contains('day-mode')) {
        bodyClassList.remove('day-mode');
        bodyClassList.add('night-mode');
    } else {
        bodyClassList.remove('night-mode');
        bodyClassList.add('day-mode');
    }
}

window.addEventListener('message', (event) => {
    // 确保消息来自iframe的源
    if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
        const message = event.data;

        if (message.type === 'buttonClick') {
            // 处理按钮点击事件
            console.log(message.data);
            scrollTo({top: 0, behavior: 'smooth'});
        }
    }
});

function scrollToTarget() {
    const targetElement = document.getElementById("moreTable");
    targetElement.scrollIntoView({behavior: 'smooth'});
}